import React, {PureComponent} from "react";
import {View, Text, StyleSheet, TouchableOpacity, Image, PixelRatio, Dimensions} from "react-native";
const {width} = Dimensions.get('window').width
type Props = {
    info: Object,
    onPress: Function,
}

export default class OvertimeCouponCell extends PureComponent<Props> {

    constructor(props) {
        super(props)
    }

    render() {

        let {info} = this.props

        let expireTime=''
        if(info.end_datetime.substring(0, 4) == '2099'){
            expireTime='永久有效'
        }else{
            let start = info.start_datetime.substring(0, 10)
            let end = info.end_datetime.substring(0, 10)
            expireTime = start + '至' + end
        }

        return (
            <TouchableOpacity onPress={() => {this.props.onPress(info)}}>
                <View style={styles.container}>
                    <Image style={styles.coupon_bg} source={require('../../../../res/img/coupon/used.png')}/>
                    <View style={{position:'absolute',flexDirection:'row'}}>
                        <View style={{flexDirection:'row',marginLeft:30,marginTop:15}}>

                            <View style={{flexDirection:'column'}}>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.price_tag}>￥</Text>
                                    <Text style={styles.price}>{info.price}</Text>
                                </View>
                                <Text style={styles.price_below}>立即使用</Text>
                            </View>
                        </View>
                        <View
                            style={{flexDirection:'column',marginLeft:50,alignItems:'flex-start',justifyContent:'center',marginTop:14}}>
                            <Text style={styles.name}>{info.title}</Text>
                            <View style={{flexDirection:'row',marginTop:10}}>
                                <Text style={styles.time}>有效期 </Text>
                                <Text style={styles.time}>{expireTime}</Text>
                            </View>
                            <Image style={styles.line}
                                   source={require('../../../../res/img/coupon/separate_line.png')}/>
                            <Text style={styles.use}>使用说明</Text>
                        </View>
                        <Image style={styles.coupon_tag} source={require('../../../../res/img/coupon/overtime.png')}/>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}


const styles = StyleSheet.create({

    container: {
        flex: 1,
        paddingLeft: 12,
        paddingRight: 12,
        position: 'relative',
        marginBottom: 6,
    },
    coupon_bg: {
        width: width,
        height: 96,
        position: 'relative'
    },
    price_tag: {
        fontWeight: 'bold',
        fontSize: 12,
        color: "white",
        marginTop: 25
    },
    price: {
        fontWeight: 'bold',
        fontSize: 35,
        color: "white"
    },
    price_below: {
        fontWeight: 'bold',
        fontSize: 11,
        color: "white",
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 6
    },
    name: {
        fontWeight: 'bold',
        fontSize: 14,
        color: "rgba(0,0,0,0.8)"
    },
    time: {
        fontWeight: 'bold',
        fontSize: 11,
        color: "rgba(0,0,0,0.4)"
    },
    use: {
        fontWeight: 'bold',
        fontSize: 12,
        color: "#DB3843",
        alignItems: 'center',
        justifyContent: 'center'
    },
    coupon_tag: {
        width: 80,
        height: 80,
        marginTop: 8,
        marginLeft:40,
        position: 'absolute',
        marginLeft:260
    },
    line: {
        marginRight: 12,
        height:1,
        width:220,
        marginTop:5,
        marginBottom:5,
        position: 'relative'
    }

})


